<template>
    <div>
      <div>显示和鼠标控制一个方块儿:参考博客https://blog.csdn.net/limmt2020/article/details/125278300</div>
      <div id="container"></div>

      <div>展示一个三维模型glf格式,自动旋转</div>
      <div id="container2" class="bg"></div>
      <div>抗锯齿</div>
      <div id="container3" class="bg"></div>
      <div>小马的DEMO</div>
      <div id="container4" class="bg"></div>
    </div>
    
</template>

<script>
export default {
  data() {
    return {
      // 方块儿
      camera: null,  //相机对象
      scene: null,  //场景对象
      renderer: null,  //渲染器对象
      mesh: null,  //网格模型对象Mesh
      controls: null, //控件对象

      geometry: null,
      texLoader:null,//纹理贴图加载器TextureLoader
      texture:null,//纹理对象Texture
      material:null,//材质
      // 马
      camera2: null,  //相机对象
      scene2: null,  //场景对象
      gltfObj:null,
      renderer2: null,  //渲染器对象
      controls2: null, //控件对象
      // 眼镜
      camera3: null,  //相机对象
      scene3: null,  //场景对象
      gltfObj3:null,
      renderer3: null,  //渲染器对象
      controls3: null, //控件对象
      // 眼镜
      camera4: null,  //相机对象
      scene4: null,  //场景对象
      gltfObj4:null,
      renderer4: null,  //渲染器对象
      controls4: null, //控件对象
    };
  },
  mounted(){
    this.init();
    this.init2();
    this.init3();
    this.init4();
  },
  methods: {    
    init() {
      this.scene = new this.$three.Scene();   
      console.log("==this.$three===",this.$three)
      console.log("==this.$three===",this.$three.TextureLoader)
      //纹理贴图加载器TextureLoader
      this.texLoader = new this.$three.TextureLoader();
      // .load()方法加载图像，返回一个纹理对象Texture
      this.texture = this.texLoader.load('/earth.jpg');
      

      //创建网格模型
      let geometry = new this.$three.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
      let material = new this.$three.MeshLambertMaterial({
        // 设置纹理贴图：Texture对象作为材质map属性的属性值
        map:this.texture,//map表示材质的颜色贴图属性
        color: "#ffffff"
      }); //材质对象Material
      this.mesh = new this.$three.Mesh(geometry, material); //网格模型对象Mesh
      this.scene.add(this.mesh); //网格模型添加到场景中

     
      //点光源
      let point = new this.$three.PointLight("white");
      point.position.set(100, 100, 100); //点光源位置 xyz
      this.scene.add(point); //点光源添加到场景中
      //环境光
      let ambient = new this.$three.AmbientLight("black");
      this.scene.add(ambient);     
     
      //相机设置      
      let container = document.getElementById("container");
      let width = window.innerWidth; //窗口宽度
      let height = window.innerHeight; //窗口高度
      let k = width / height; //窗口宽高比
      let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      this.camera = new this.$three.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      this.camera.position.set(200, 300, 200); //设置相机位置
      this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
      //创建渲染器对象
      this.renderer = new this.$three.WebGLRenderer();
      this.renderer.setSize(width, height); //设置渲染区域尺寸
      this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      container.appendChild(this.renderer.domElement);
      
      let animloop=()=> {
        render();
        // window.requestAnimationFrame(animloop);
        this.controls = new this.$orbitControls(this.camera,this.renderer.domElement);//创建控件对象
        this.controls.addEventListener('change', render);//监听鼠标、键盘事件
      }
      let render=()=> {
        this.renderer.render(this.scene, this.camera); //执行渲染操作
      }
      animloop();
    },
    init2() {
      this.scene2 = new this.$three.Scene();
      let loader = new this.$GLTFLoader();
      let _that=this;
      
      
      //点光源
      let point = new this.$three.PointLight("white");
      point.position.set(0, 0, 1000); //点光源位置 xyz
      this.scene2.add(point); //点光源添加到场景中
      //环境光
      let ambient = new this.$three.AmbientLight("white");
      this.scene2.add(ambient);     
     
      //相机设置      
      let container2 = document.getElementById("container2");
      let width = window.innerWidth; //窗口宽度
      let height = window.innerHeight; //窗口高度
      let k = width / height; //窗口宽高比
      let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      this.camera2 = new this.$three.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      this.camera2.position.set(200, 300, 200); //设置相机位置
      this.camera2.lookAt(this.scene2.position); //设置相机方向(指向的场景对象)
      //创建渲染器对象
      this.renderer2 = new this.$three.WebGLRenderer();
      this.renderer2.setSize(width, height); //设置渲染区域尺寸
      this.renderer2.setClearColor(0xffffff,0.1); //设置背景颜色
      container2.appendChild(this.renderer2.domElement);
      
      let animloop=()=> {
        setInterval(()=>{
          _that.renderer2.render(_that.scene2, _that.camera2); //执行渲染操作
          _that.gltfObj.rotateY(0.01); //每次绕y轴旋转0.01弧度
        }, 20);
      }

      loader.load( '/test.gltf', function ( gltf ) {
        _that.gltfObj=gltf.scene;
        // 模型太大缩放
        _that.gltfObj.scale.x = 0.5;
        _that.gltfObj.scale.y = 0.5;
        _that.gltfObj.scale.z = 0.5;
        _that.scene2.add( gltf.scene );
        animloop();        
      }, undefined, function ( error ) {
        console.error( error );
      } );
    },
    init3() {
      this.scene3 = new this.$three.Scene();
      let loader = new this.$GLTFLoader();
      let _that=this;

      
      //点光源
      let point = new this.$three.PointLight("white");
      point.position.set(0, 0, 1000); //点光源位置 xyz
      this.scene3.add(point); //点光源添加到场景中
      //环境光
      let ambient = new this.$three.AmbientLight("white");
      this.scene3.add(ambient);     
     
      //相机设置      
      let container3 = document.getElementById("container3");
      let width = window.innerWidth; //窗口宽度
      let height = window.innerHeight; //窗口高度
      let k = width / height; //窗口宽高比
      let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      this.camera3 = new this.$three.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      this.camera3.position.set(200, 300, 200); //设置相机位置
      this.camera3.lookAt(this.scene3.position); //设置相机方向(指向的场景对象)
      //创建渲染器对象
      this.renderer3 = new this.$three.WebGLRenderer({
        //增加下面两个属性，可以抗锯齿
        antialias:true,
        alpha:true
      });
      this.renderer3.setSize(width, height); //设置渲染区域尺寸
      this.renderer3.setClearColor(0xffffff,0.1); //设置背景颜色
      container3.appendChild(this.renderer3.domElement);
      
      let animloop=()=> {
        render();
        // window.requestAnimationFrame(animloop);
        this.controls3 = new this.$orbitControls(this.camera3,this.renderer3.domElement);//创建控件对象
        this.controls3.addEventListener('change', render);//监听鼠标、键盘事件
      }
      let render=()=> {
        this.renderer3.render(this.scene3, this.camera3); //执行渲染操作
      }
      loader.load( '/model230114.glb', function ( gltf ) {
        _that.gltfObj3=gltf.scene;
        _that.scene3.add( gltf.scene );
        animloop();
      }, undefined, function ( error ) {
        console.error( error );
      } );      
    },
    init4() {
      this.scene4 = new this.$three.Scene();
      let loader = new this.$GLTFLoader();
      let _that=this;
      
      
      //点光源
      let point = new this.$three.PointLight("white");
      point.position.set(0, 0, 1000); //点光源位置 xyz
      this.scene4.add(point); //点光源添加到场景中
      //环境光
      let ambient = new this.$three.AmbientLight("white");
      this.scene4.add(ambient);     
     
      //相机设置      
      let container4 = document.getElementById("container4");
      let width = window.innerWidth; //窗口宽度
      let height = window.innerHeight; //窗口高度
      let k = width / height; //窗口宽高比
      let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      this.camera4 = new this.$three.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      this.camera4.position.set(200, 50, 200); //设置相机位置
      this.camera4.lookAt(this.scene4.position); //设置相机方向(指向的场景对象)
      //创建渲染器对象
      this.renderer4 = new this.$three.WebGLRenderer();
      this.renderer4.setSize(width, height); //设置渲染区域尺寸
      this.renderer4.setClearColor(0xffffff,0.1); //设置背景颜色
      container4.appendChild(this.renderer4.domElement);
      
      let animloop=()=> {
        setInterval(()=>{
          _that.renderer4.render(_that.scene4, _that.camera4); //执行渲染操作
          _that.gltfObj4.rotateY(0.01); //每次绕y轴旋转0.01弧度
        }, 20);
      }

      loader.load( '/Horse.glb', function ( gltf ) {
        _that.gltfObj4=gltf.scene;
        _that.gltfObj4.translateY(-100);//沿着x轴正方向平移距离100
        const mesh = _that.gltfObj4.children[0]; //获取Mesh
        mesh.material.map = _that.texture;//map表示材质的颜色贴图属性
        _that.scene4.add( gltf.scene );
        animloop();        
      }, undefined, function ( error ) {
        console.error( error );
      } );
    },
  }
  
}
</script>

<style>
.bg{
  background-color: #efefef;
}
</style>